import { Text, View, Image, RichText } from '@tarojs/components';
import Taro from '@tarojs/taro'
import { useEffect, useState } from 'react'
import CustomHeader from 'src/components/CustomHeader/CustomHeader'
import styles from './customerService.module.less'
import customerServiceStore from './CustomerServiceStore'
import { Button } from '@nutui/nutui-react-taro'

import { observer } from "mobx-react-lite";
import utilsApi from 'src/api/utilsApi'
import utils from 'src/utils/utils';
import PageLayer from 'src/components/PageLayer/PageLayer';
import utilsStore from 'src/utils/utilsStore';

// 子项目数据结构
export type SubItem = {
    title: string,
    container: string,
    file?: string
};

// 主项目数据结构（支持2级目录）
export type BusinessItem = {
    title: string,
    children?: SubItem[],
    // 添加可选的container属性，使类型定义更灵活
    container?: string
};

// 商务合作
const CustomerService = observer(() => {
    // 数据列表
    const [dataItems, setDataItems] = useState<Array<BusinessItem>>([]);
    // 当前选中的项索引
    const [selectedIndex, setSelectedIndex] = useState<number>(0);
    // 存储每个父级目录的展开状态
    const [expandedState, setExpandedState] = useState<{[key: number]: boolean}>({});
    // 当前选中的子项索引
    const [selectedSubIndex, setSelectedSubIndex] = useState<number | null>(null);

    useEffect(() => {
        utilsApi.queryPropertyByTitle("business_cooperation").then((data) => {
            // 确保返回的数据是Array<BusinessItem>格式
            const items: Array<BusinessItem> = Array.isArray(data) ? data : [];
            setDataItems(items);
            // 如果有数据，默认选中第一项
            if (items.length > 0) {
                setSelectedIndex(0);
                // 默认展开第一个有子项的目录
                const firstWithChildren = items.findIndex(item => item.children && item.children.length > 0);
                if (firstWithChildren !== -1) {
                    setExpandedState({ [firstWithChildren]: true });
                }
            }
        });
    }, []);

    // 处理标题选择
    const handleTitleSelect = (index: number) => {
        // 切换展开状态
        setExpandedState(prev => ({
            ...prev,
            [index]: !prev[index]
        }));
        setSelectedSubIndex(null); // 选择父项时清空子项选择
    };

    // 处理子项选择
    const handleSubItemSelect = (index: number, subIndex: number) => {
        setSelectedIndex(index);
        setSelectedSubIndex(subIndex);
    };

    // 切换目录展开状态
    const toggleExpand = (index: number) => {
        setExpandedState(prev => ({
            ...prev,
            [index]: !prev[index]
        }));
    };

    // 获取当前选中的数据项
    const getCurrentItem = (): { title: string; container: string; file?: string } => {
        const item = dataItems[selectedIndex] || { title: '', container: '' };
        // 如果有选中的子项，返回子项
        if (selectedSubIndex !== null && item.children && item.children[selectedSubIndex]) {
            return item.children[selectedSubIndex];
        }
        // 确保返回有container属性的对象
        // 明确声明返回类型，并使用安全的方式访问container属性
        const safeItem = item as any;
        if (safeItem.container !== undefined && typeof safeItem.container === 'string') {
            return { 
                title: item.title || '', 
                container: safeItem.container, 
                file: safeItem.file 
            };
        }
        return { title: item.title || '', container: '' };
    };

    // 明确指定currentItem的类型，避免类型推断问题
    const currentItem = getCurrentItem() as { title: string; container: string; file?: string };

    // 处理文件分享
    const handleFileDownload = (fileUrl?: string) => {
        if (!fileUrl) return;

        Taro.showLoading({
            title: '正在准备文件...',
        });

        // 获取文件类型
        const getFileType = (url: string) => {
            const extension = url.split('.').pop()?.toLowerCase() || '';
            return extension;
        };

        const fileType = getFileType(fileUrl);
        const fileName = `文件_${new Date().getTime()}.${fileType}`;

        console.log(utils.ossSuffix(fileUrl));

        // 使用Taro.downloadFile下载文件
        Taro.downloadFile({
            url: utils.ossSuffix(fileUrl),
            timeout: 60000,     // 设置较长的超时时间，60秒
            success: (res) => {
                Taro.hideLoading();
                console.log('下载状态码:', res.statusCode);
                console.log('下载响应:', res);
                if (res.statusCode === 200 && res.tempFilePath) {
                    console.log('文件下载成功:', res.tempFilePath);
                    // 使用Taro.shareFileMessage将文件分享给微信好友或文件传输助手
                    Taro.shareFileMessage({
                        filePath: res.tempFilePath,
                        // fileName: fileName,
                        success: () => {
                            // Taro.showToast({
                            //     title: '文件分享成功',
                            //     icon: 'success',
                            //     duration: 2000
                            // });
                        },
                        fail: (error) => {
                            // 分享失败时，提供备选方案
                            Taro.showModal({
                                title: '提示',
                                content: '文件下载失败，是否尝试复制链接到浏览器打开？',
                                success: (resModal) => {
                                    if (resModal.confirm) {
                                        Taro.setClipboardData({
                                            data: utils.ossSuffix(fileUrl),
                                            success: () => {
                                                Taro.showToast({
                                                    title: '链接已复制',
                                                    icon: 'success'
                                                });
                                            }
                                        });
                                    }
                                }
                            });
                        }
                    });
                } else {
                    console.error('文件下载失败，状态码:', res.statusCode, '临时文件路径:', res.tempFilePath);
                    Taro.showToast({
                        title: res.tempFilePath ?
                            `文件下载失败，状态码:${res.statusCode}` :
                            '文件下载失败，未获取到临时文件',
                        icon: 'none'
                    });
                }
            },
            fail: (error) => {
                Taro.hideLoading();
                console.error('下载文件失败:', error);
                // 根据错误信息提供更具体的提示
                const errorMsg = error.errMsg || '';
                let toastMsg = '网络请求失败，请检查网络连接';

                if (errorMsg.includes('timeout')) {
                    toastMsg = '文件下载超时，请稍后重试';
                } else if (errorMsg.includes('not exist')) {
                    toastMsg = '文件不存在或已被删除';
                } else if (errorMsg.includes('permission')) {
                    toastMsg = '无权限下载该文件';
                }

                Taro.showToast({
                    title: toastMsg,
                    icon: 'none'
                });
            }
        });
    };

    return (
        <PageLayer
            showBack
            title="商务合作"
        >
            <View className={styles.customerService}>
                <View className={styles.content}>
                    {/* 左右分栏布局 */}
                    <View
                        className={styles.layout}
                        style={{
                            height: utilsStore.containerHeight - utils.rpx2px(40) // 减去标题栏的高度
                        }}
                    >
                        {/* 左侧标题列表 */}
                        <View className={styles.titleList}>
                            {dataItems.length > 0 ? (
                                dataItems.map((item, index) => (
                                    <View key={index} className={styles.menuItemWrapper}>
                                        {/* 父级菜单 */}
                                        <View
                                            className={`${styles.titleItem} ${expandedState[index] ? styles.titleItemActive : ''}`}
                                            onClick={() => handleTitleSelect(index)}
                                        >
                                            {item.children && item.children.length > 0 && (
                                                <View 
                                                    className={`${styles.expandIcon} ${expandedState[index] ? styles.expanded : ''}`}
                                                    onClick={(e) => {
                                                        e.stopPropagation(); // 阻止事件冒泡
                                                        toggleExpand(index);
                                                    }}
                                                >
                                                    ▶
                                                </View>
                                            )}
                                            <Text className={styles.menuText}>{item.title}</Text>
                                        </View>

                                        {/* 子级菜单 - 仅当有子项且展开时显示 */}
                                        {item.children && item.children.length > 0 && expandedState[index] && (
                                            <View className={styles.subMenuList}>
                                                {item.children.map((subItem, subIndex) => (
                                                    <View
                                                        key={subIndex}
                                                        className={`${styles.subTitleItem} ${selectedIndex === index && selectedSubIndex === subIndex ? styles.subTitleItemActive : ''}`}
                                                        onClick={() => handleSubItemSelect(index, subIndex)}
                                                    >
                                                        <Text className={styles.subMenuText}>{subItem.title}</Text>
                                                    </View>
                                                ))}
                                            </View>
                                        )}
                                    </View>
                                ))
                            ) : (
                                <View className={styles.emptyState}>加载中...</View>
                            )}
                        </View>

                        {/* 右侧内容区域样式 - 保持不变 */}
                        <View className={styles.contentArea}>
                            {dataItems.length > 0 ? (
                                <>
                                    {/* 富文本内容 */}
                                    <View className={styles.richTextContainer}>
                                        <RichText
                                            className="ql-editor"
                                            nodes={currentItem.container ? currentItem.container.replace(/<img([^>]*)>/g, '<img style="max-width:100%;height:auto;" $1>') : ''}
                                        />
                                    </View>
                                    {/* 如果有文件，显示下载按钮，放在富文本下方 */}
                                    {currentItem.file && (
                                        <View className={styles.downloadContainer}>
                                            <Button
                                                type='primary'
                                                className={styles.downloadButton}
                                                onClick={() => handleFileDownload(currentItem.file)}
                                            >
                                                下载文件
                                            </Button>
                                        </View>
                                    )}
                                </>
                            ) : (
                                <View className={styles.emptyContent}>暂无内容</View>
                            )}
                        </View>
                    </View>
                </View>
            </View>
        </PageLayer>
    );
});

export default CustomerService;